<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="960px" append-to-body>
    <div class="">
      <div class="table_box">
        <el-table border :data="tableData.records" style="width: 100%" stripe>
          <el-table-column prop="operatTime" label="时间" width="160"></el-table-column>
          <el-table-column prop="operator" label="操作人" width="150"></el-table-column>
          <el-table-column prop="status" label="操作" width="120"></el-table-column>
          <el-table-column prop="alteration" label="明细">
            <template slot-scope="scope">
              <div class="mingxi">
                {{ getAlterationString(scope.row.alteration) }}
              </div>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="gameName" label="备注"></el-table-column> -->
        </el-table>
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

      </div>
    </div>
  </el-dialog>
</template>

<script>
import goodsListApi from "../../../api/gameConfig/goodsList";
// 引入表头
import { goodsListHeaders } from "../../../utils/tableHeaders";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      title: "操作记录",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        accountId: "",
      },
      tableData: {
        records: [],
        total: 0,
      },
      timer: [],

      // 表单参数
      form: {},
      id: "",
      hideFields: [
        "f1",
        "f2",
        "f3",
        "f4",
        "f5",
        "f6",
        "f7",
        "f8",
        "f9",
        "f10",
        "f11",
        "f12",
        "f13",
        "f14",
        "f15",
        "f16",
        "f17",
        "f18",
        "f19",
        "f20",
        "f21",
        "f22",
        "f23",
        "f24",
        "f25",
        "f26",
        "f27",
        "f28",
        "f29",
        "f30",
        "f31",
        "f32",
        "f33",
        "f34",
        "f35",
        "f36",
        "f37",
        "f38",
        "f39",
        "f40",
      ],
      headerObj: {},
    };
  },
  created() {
    this.headerObj = this.arrayToObject(goodsListHeaders, "key");
  },
  computed: {
    getAlterationString() {
      return (str) => {
        let result = "";
        let other = ''
        if (str) {
          let arr = [];
          try {
            arr = JSON.parse(str);
          } catch (error) {
            return str;
          }
          if(Array.isArray(arr)){
            if (arr && arr.length) {
              for (let i = 0; i < arr.length; i++) {
                const item = arr[i];
                const keys = Object.keys(item);
                if (keys && keys.length) {
                  if (!this.hideFields.includes(keys[0])) {
                    let changeStr = "";
                    if (
                      (keys[0] == "urlArr" || keys[0] == "otherImg") &&
                      item[keys[0]] != "null->[]"
                    ) {
                      // if (keys[0] == "urlArr") {
                      //   changeStr = "修改了详情图；\n";
                      // }
                      if (keys[0] == "otherImg") {
                        changeStr = `修改了其他图片；\n`;
                      }
                    } else if (this.headerObj[keys[0]]) {
                      if (keys[0] == "titleImg") {
                        changeStr = `修改了首图；\n`;
                      } else if (keys[0] == "dakuanImg") {
                        changeStr = `修改了支付截图；\n`;
                      } else {
                        const name = this.headerObj[keys[0]]?.label;
                        const temp = item[keys[0]]
                          ? item[keys[0]].replace(/\s*->\s*/g, " 更改为 ")
                          : "";
                        changeStr = `${name}：从 ${temp} ；\n`;
                      }
                    }
                    result = result + changeStr;
                  } else {
                    // 不处理 自定义字段
                    // other = other + keys[0]+'：'+ item[keys[0]] + "；"

                  }
                }
              }
            }
          }else{
            return arr;
          }
        }
        return result + other;
      };
    },
  },
  methods: {
    // 打开弹窗
    open(id) {
      this.queryParams.accountId = id;
      this.dialogVisible = true;
      this.getList();
    },
    // // 重置
    // resetQuery() {
    //   this.queryParams = {
    //     pageNum: 1,
    //     pageSize: 10,
    //     phone:this.queryParams.phone
    //   };
    //   this.timer = []
    //   this.getList();
    // },
    getList(id) {
      goodsListApi.getGoodsCaozuojilu(this.queryParams).then((res) => {
        this.tableData.records = res.rows;
        this.tableData.total = res.total;
      });
    },
    // search(){
    //   this.queryParams.pageNum = 1
    //   this.getList();
    // },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.mingxi {
  white-space: pre-line;
  max-height: 150px;
  overflow-y: auto;
}
</style>
